/*有接口*/
/*
* import React, { useEffect, useState } from 'react';
import axios from 'axios';

const FeedbackStatus = () => {
    const [tasks, setTasks] = useState([]);
    const [reply, setReply] = useState('');

    useEffect(() => {
        const fetchTasks = async () => {
            const response = await axios.get('/api/tasks');
            setTasks(response.data);
        };
        fetchTasks();
    }, []);

    const handleReply = async (id) => {
        try {
            const response = await axios.put(`/api/tasks/${id}`, { reply });
            setTasks(tasks.map(task => (task.id === id ? response.data : task)));
            setReply('');
        } catch (error) {
            console.error('Error replying to task:', error);
        }
    };

    return (
        <div className="p-6 bg-white rounded-lg shadow-md">
            <h2 className="text-2xl font-bold mb-4">反馈状态与回复</h2>
            <ul>
                {tasks.map(task => (
                    <li key={task.id} className="mb-4">
                        <p>反馈: {task.feedback}</p>
                        <p>分类: {task.category}</p>
                        <p>优先级: {task.priority}</p>
                        <p>状态: {task.status}</p>
                        <div>
                            <h3 className="font-bold">回复:</h3>
                            <ul>
                                {task.replies.map((reply, index) => (
                                    <li key={index}>{reply}</li>
                                ))}
                            </ul>
                        </div>
                        <textarea
                            value={reply}
                            onChange={(e) => setReply(e.target.value)}
                            placeholder="输入回复"
                            className="w-full p-2 mb-2 border border-gray-300 rounded"
                        />
                        <button
                            onClick={() => handleReply(task.id)}
                            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"
                        >
                            回复
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default FeedbackStatus;
*
* */

import { useState } from 'react';

const FeedbackStatus = () => {
    const [tasks, setTasks] = useState([
        {
            id: 1,
            feedback: '应用程序崩溃了，请修复这个bug。',
            category: 'Bug报告',
            priority: '高',
            status: '待处理',
            replies: ['我们正在调查这个问题。'],
        },
        {
            id: 2,
            feedback: '希望添加一个夜间模式功能。',
            category: '功能请求',
            priority: '中',
            status: '处理中',
            replies: ['这个功能正在开发中。'],
        },
        {
            id: 3,
            feedback: '界面设计非常棒！',
            category: '一般意见',
            priority: '低',
            status: '已完成',
            replies: ['感谢您的反馈！'],
        },
    ]);

    const [reply, setReply] = useState('');

    const handleReply = (id) => {
        setTasks(tasks.map(task =>
            task.id === id ? { ...task, replies: [...task.replies, reply] } : task
        ));
        setReply('');
    };

    return (
        <div className="p-6 bg-white rounded-lg shadow-md">
            <h2 className="text-2xl font-bold mb-4">反馈状态与回复</h2>
            <ul>
                {tasks.map(task => (
                    <li key={task.id} className="mb-4">
                        <p>反馈: {task.feedback}</p>
                        <p>分类: {task.category}</p>
                        <p>优先级: {task.priority}</p>
                        <p>状态: {task.status}</p>
                        <div>
                            <h3 className="font-bold">回复:</h3>
                            <ul>
                                {task.replies.map((reply, index) => (
                                    <li key={index}>{reply}</li>
                                ))}
                            </ul>
                        </div>
                        <textarea
                            value={reply}
                            onChange={(e) => setReply(e.target.value)}
                            placeholder="输入回复"
                            className="w-full p-2 mb-2 border border-gray-300 rounded"
                        />
                        <button
                            onClick={() => handleReply(task.id)}
                            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"
                        >
                            回复
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default FeedbackStatus;